// react路由懒加载
import Loadable from 'react-loadable';
import styles from '@/components/empty/styles.module.less';

const loadingStyle = {
  height: '60vh',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'center'
};

export const RouterLoading = () => {
  return (
    <div style={loadingStyle}><i className="iconfont iconjiazai" /></div>
  );
};

export const LoadingComponent = ({ isLoading, error }) => {
  // Handle the loading state
  if (isLoading) {
    return <RouterLoading />;
  }
  // Handle the error state
  else if (error) {
    console.error(error);
    return (
      <div className={styles['page-empty']}>
        <img src={require('@/assets/images/repair.png')} alt="" />
        <div className={styles['empty-text']}>模块已更新，请重新刷新页面</div>
        <a className={styles['empty-btn']} onClick={() => window.location.reload()}>点击刷新</a>
      </div>
    );
  }
  else {
    return null;
  }
};

//过场组件默认采用通用的，若传入了loading，则采用传入的过场组件
export default (loader, loading = LoadingComponent) => {
  let LoaderFun = Loadable({ loader, loading });
  let originalWillMount = LoaderFun.prototype.componentWillMount;
  LoaderFun.prototype.UNSAFE_componentWillMount = originalWillMount;
  delete LoaderFun.prototype.componentWillMount; // 解决 react-loadable 的 componentWillMount warning
  return LoaderFun;
};

